<template>
    <div class="right-wrapper content-lianxi-tiaomu content-my">
        <div class="page-titles">
            <div class="col-md-5">
                <h3 class="text-themecolor">个人设置</h3>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
            	<div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="">个人设置</h4>
                            <hr>
                            <form class="form-horizontal">
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <label class="pull-left">头像</label>
                                        <div class="user_pic">
                                            <img :src=" 'http://image.ipuqing.com/' + user.Avatar" style="width: 100px;height: 100px"/>
                                        </div>
                                        <span>
                                            <el-upload
                                                class="upload-demo setting-btn"
                                                :action="uploadUrl"
                                                :on-success="handleAvatarSuccess"
                                                :before-upload="beforeAvatarUpload"
                                                :show-file-list="false"
                                                >
                                                <el-button size="small" type="danger">修改头像</el-button>
                                            </el-upload>
                                        </span>
                                        <!--<span class="setting-btn" id="avatar-modal-btn">修改头像</span>-->
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="">昵称</label>
                                        <div class="">
                                            <input type="text" placeholder="昵称" class="form-control form-control-line" v-model="user.Nickname">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="">手机</label>
                                        <div class="">
                                            <input type="text" placeholder="手机号" class="form-control form-control-line" v-model="user.Name">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-6">
                                        <label class="">关注的考试<span>(*所选随机试题将由此选出)</span></label>
                                        <div>
                                            <el-select v-model="user.PqTestCategoryId"  placeholder="请选择" size = "350">
                                                <el-option
                                                    v-for="item in test_categories"
                                                    :key="item.id"
                                                    :label="item.title"
                                                    :value="item.id">
                                                </el-option>
                                            </el-select>
                                            <!--<el-cascader-->
                                                <!--size="350"-->
                                                <!--expand-trigger="hover"-->
                                                <!--:props="defaultProps"-->
                                                <!--:options="test_categories"-->
                                                <!--v-model="selectedCategories"-->
                                                <!--@change="cateChange">-->
                                            <!--</el-cascader>-->
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-md-12">
                                        <a class="btn btn-success" @click="updateuser()">保存修改</a>
                                    </div>
                                </div>
                            </form>
                            <h4 class="m-t-40">排名</h4>
                            <hr>
                            <h5>
                                <p>评分为：<strong>96分</strong></p>
                                <p>全站最高分为：100分<span class="pull-right">击败了80%的学生</span></p>
                            </h5>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">50% Complete</span> </div>
                            </div>
                            <h5>
                                <p>总做题量为：<strong>104道</strong></p>
                                <p>全站最高为：84082道<span class="pull-right">击败了90%的学生</span></p>
                            </h5>
                            <div class="progress">
                                <div class="progress-bar progress-bar-custom" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">50% Complete</span> </div>
                            </div>
                            <h5>
                                <p>总正确率为：<strong>20.09%</strong></p>
                                <p>全站最高为：100%<span class="pull-right">击败了60%的学生</span></p>
                            </h5>
                            <div class="progress">
                                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span> </div>
                            </div>
                            <h5>
                                <p>昨天做题量为：<strong>15道</strong></p>
                                <p>全站最高为：2418道<span class="pull-right">击败了70%的学生</span></p>
                            </h5>
                            <div class="progress">
                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%;"> <span class="sr-only">50% Complete</span> </div>
                            </div>
                            <h4 class="m-t-40">1对1PK做题</h4>
                            <hr>
                            <p>1对1PK做题应用</p>
                            <h4 class="m-t-40">段位</h4>
                            <hr>
                            <p>段位列表</p>
                        </div>
                    </div>
            	</div>
            </div>
        </div>
    </div>
</template>
<script>
import http from "../../lib/http"
import tree from "../../lib/tree"
export default {
    data : function () {
        return {
            user : {nickname:'请登录'},
            uploadUrl : http.base + '/users/avatar',
            test_categories : [],
            defaultProps: {
                children: 'children',
                label: 'title',
                value: "id"
            },
            selectedCategories : ["23"]
        }
    },
    created : function () {
        var self = this
        http.alive(this,function(){
            self.user = JSON.parse(localStorage.getItem("userinfo"))
            self.user.PqTestCategoryId = self.user.PqTestCategoryId + ""
            self.selectedCategories = [self.user.PqTestCategoryId]
            console.log(self.selectedCategories)
            self.getAllTestLibraries()
            //this.user.fullAvatar = 'http://image.ipuqing.com/'+this.user.Avatar
        })
    },
    methods : {
        handleAvatarSuccess : function (file) {
            this.user.Avatar= file.msg
            //this.$set(this.user,'fullAvatar','http://image.ipuqing.com/'+file.msg)
            //alert(this.user.fullAvatar)
            //alert(file.msg)
        },
        beforeAvatarUpload : function(file){
            var isImg = false
            switch(file.type){
                case 'image/png' :
                case 'image/jpeg' :
                case 'image/jpg' :
                case 'image/gif' :
                    isImg = true
                    break;
            }
            if (!isImg) {
                this.$message.error('只支持图片上传,其它文件不允许上传');
            }
            return isImg
        },
        getAllTestLibraries : function(){
            var self = this;
            http.get(self,"test_categories/code/CS_ROOT").then(function(res){
                var response = res.data
                if (response.code == "ok") {
                    self.test_categories = tree.make(response.data,"pid",response.data[0].id,"children")
                }
                console.log(self.test_categories)
            })
        },
        cateChange : function (value) {
            this.user.PqTestCategoryId = value[0]
        },
        updateuser : function () {
            var self = this;
            var up = {}
            for(var i in this.user){
                if((i != "Password") && (i != "CreatedTime")) {
                    up[i.toLowerCase()] = this.user[i]
                }
            }

            http.post(this,"users",up).then(function(res){
                self.$message.success("用户信息已更新!")
                localStorage.setItem("userinfo",JSON.stringify(self.user));
                setTimeout(function(){
                    self.$root.$emit("updateHeader",self.user)
                },500)

            })
        }
    }
}
</script>
